<script setup lang="ts">
import { useRouter } from "vue-router";
import { computed, ref } from "vue";
import checkAccess from "@/access/checkAccess";
import { useLoginUserStore } from "@/store/userStore";
import { routes } from "@/router/routes";
import { userLogoutUsingPost } from "@/api/userController";

const router = useRouter();

const loginUserStore = useLoginUserStore();

// 当前选中的菜单项
const selectedKeys = ref(["/"]);
// 路由跳转的时候更新选中的菜单项
router.afterEach((to) => {
  selectedKeys.value = [to.path];
});
// 过滤出不隐藏在菜单中的路由项
const visibleRoutes = computed(() => {
  return routes.filter((item) => {
    // 检查是否在菜单中隐藏
    if (item.meta?.hideInMenu) {
      return false;
    }
    // 检查是否有访问权限
    if (!checkAccess(loginUserStore.loginUser, item.meta?.access as string)) {
      return false;
    }
    return true;
  });
});
const flatRoutes = computed(() => {
  return visibleRoutes.value.filter((route) => !route.children);
});
const nestedRoutes = computed(() => {
  return visibleRoutes.value.filter((route) => route.children);
});
// 登录跳转
const goToLogin = () => {
  router.push("/user/login");
};

// 退出登录
const logout = async () => {
  userLogoutUsingPost().then(() => {
    // 退出登录成功，清除用户信息并跳转到登录页
    router.push("/user/login");
  });
};
// 点击菜单跳转到对应应用
const doMenuClick = (key: string) => {
  router.push({ path: key });
};
// 跳转个人中心
const doInfo = async () => {
  await router.push("/info");
};
</script>

<template>
  <div id="globalHeader">
    <a-row id="globalHeader" align="center" :wrap="false">
      <a-col flex="auto">
        <a-menu
          mode="horizontal"
          :selected-keys="selectedKeys"
          @menu-item-click="doMenuClick"
        >
          <a-menu-item
            key="0"
            :style="{ padding: 0, marginRight: '40px' }"
            disabled
          >
            <div class="titleBar">
              <img
                src="../assets/logo.png"
                alt="logo"
                width="32px"
                height="32px"
              />
              <span class="title">AI 智能答题应用平台</span>
            </div>
          </a-menu-item>
          <a-menu-item v-for="item in flatRoutes" :key="item.path">
            <template #icon>
              <icon-home></icon-home>
            </template>
            <span>{{ item.name }}</span>
          </a-menu-item>
          <a-sub-menu v-for="item in nestedRoutes" :key="item.path">
            <template #icon>
              <icon-apps></icon-apps>
            </template>
            <template #title
              ><span>{{ item.name }}</span></template
            >
            <a-menu-item v-for="child in item.children" :key="child.path">
              <span>{{ child.name }}</span>
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-col>
      <a-col flex="100px">
        <a-dropdown trigger="hover">
          <a-avatar :size="40">
            <div v-if="loginUserStore.loginUser.id" class="avatar">
              <img alt="avatar" :src="loginUserStore.loginUser.userAvatar" />
            </div>
            <div v-else class="unlogged-in">未登录</div>
          </a-avatar>
          <template #content>
            <a-doption v-if="loginUserStore.loginUser.id" @click="doInfo">
              <icon-user />
              个人主页
            </a-doption>
            <a-doption
              v-if="loginUserStore.loginUser.id"
              @click="logout"
              style="color: red"
            >
              <icon-poweroff />
              退出登录
            </a-doption>
            <a-doption v-else @click="goToLogin">
              <icon-import />
              立即登录
            </a-doption>
          </template>
        </a-dropdown>
      </a-col>
    </a-row>
  </div>
</template>
<style scoped>
#globalHeader {
}

.titleBar {
  display: flex;
  align-items: center;
}

.title {
  margin-left: 16px;
  color: black;
}

.logo {
  height: 48px;
}

.unlogged-in {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ccc;
  color: #fff;
  font-size: 12px;
}

/* 头像样式 */
.avatar img {
  border-radius: 50%;
}
</style>
